<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
    <style>
    </style>
</head>
<body>
<div id="app">

    <layout>
        <template v-slot:header>
            <div style="display: flex; justify-content: space-between; align-items: center">
                <h1>XXXX平台</h1>
                <span>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                </span>
            </div>
        </template>
        <template v-slot:footer>
            <div style="text-align: center">yc公司</div>
        </template>

        <template v-slot:main>
            <message type="error" title="系统错误" msg="网站崩溃!">
                <a href="#">网站崩溃!</a>
            </message>
            <message title="系统提示" msg="明天放假">
                <button>明天放假</button>
            </message>
        </template>

    </layout>

</div>
<script>
    Vue.component("message",{
        props:[ "type", "title","msg"],
        template:`
            <div style="padding: 10px; margin-bottom: 5px;" :style="{backgroundColor: getBg()}">
                <b style="padding-right: 10px; margin-right: 10px;
                    border-right: 1px #aaa solid">{{title}}</b>
                <slot>
                    <span>{{msg}}</span>
                </slot>
            </div>
        `,
        methods:{
            getBg(){
                if(this.type=='error'){
                    return "red";
                } else {
                    return "green";
                }
            }
        }
    })

    Vue.component("layout",{
        template:`
        <div>
            <header style="background-color: #eee; padding: 10px 10%">
                <slot name="header">页头</slot>
            </header>
            <main style="background-color: #ddd; padding: 10px; height: 400px; margin-inline: 10%">
                <slot name="main">内容区</slot>
            </main>
            <footer style="background-color: #ccc; padding: 10px">
                <slot name="footer">页脚</slot>
            </footer>
        </div>
        `
    });

    var v = new Vue({
        el:"#app",
    })
    /**
     * 组件插槽
     */
</script>
</body>
</html>
